import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';
import { Article } from '@/interfaces/article';
import { formatDistanceToNow } from 'date-fns';

interface PreviewPaneProps {
  title: string;
  content: string;
  article: Article;
}

const PreviewPane: React.FC<PreviewPaneProps> = ({ title, content, article }) => {
  const formattedDate = formatDistanceToNow(new Date(article.lastModified), { addSuffix: true });
  const wordCount = content.split(/\s+/).filter(word => word.length > 0).length;
  const readTime = Math.ceil(wordCount / 200);

  return (
    <div className="h-full flex flex-col">
      <div className="mb-6 p-4 bg-ios-gray-50 dark:bg-ios-gray-800 rounded-apple-lg">
        <div className="flex items-center justify-between mb-2">
          <span className="text-xs text-ios-gray-500 dark:text-ios-gray-400 uppercase tracking-wide">
            Preview
          </span>
          <span className="text-xs text-ios-gray-500 dark:text-ios-gray-400">
            {readTime} min read
          </span>
        </div>
        
        {title && (
          <h1 className="text-2xl font-bold text-ios-gray-900 dark:text-white mb-2">
            {title}
          </h1>
        )}
        
        <div className="flex items-center space-x-4 text-sm text-ios-gray-500 dark:text-ios-gray-400">
          <span>By {article.author}</span>
          <span>•</span>
          <span>Last modified {formattedDate}</span>
          <span>•</span>
          <span>{wordCount} words</span>
        </div>
      </div>
      
      <div className="flex-1 overflow-auto">
        <div className="p-4 bg-white dark:bg-ios-gray-800 rounded-apple-lg h-full">
          {content ? (
            <article className="prose prose-lg max-w-none dark:prose-invert prose-headings:text-ios-gray-900 dark:prose-headings:text-white prose-p:text-ios-gray-700 dark:prose-p:text-ios-gray-300 prose-a:text-ios-blue prose-code:text-ios-blue prose-pre:bg-ios-gray-50 dark:prose-pre:bg-ios-gray-700">
              <ReactMarkdown
                remarkPlugins={[remarkGfm]}
                rehypePlugins={[rehypeHighlight]}
              >
                {content}
              </ReactMarkdown>
            </article>
          ) : (
            <div className="h-full flex items-center justify-center">
              <div className="text-center text-ios-gray-400 dark:text-ios-gray-500">
                <div className="mb-4">
                  <svg className="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                </div>
                <p className="text-lg">Start typing to see preview</p>
                <p className="text-sm mt-2">Your content will appear here as you write</p>
              </div>
            </div>
          )}
        </div>
      </div>
      
      {/* Preview status */}
      <div className="mt-4 flex justify-between items-center text-xs text-ios-gray-500 dark:text-ios-gray-400">
        <div>
          Rendered with Markdown
        </div>
        <div className="flex items-center space-x-2">
          <div className="w-2 h-2 bg-ios-green rounded-full"></div>
          <span>Live Preview</span>
        </div>
      </div>
    </div>
  );
};

export default PreviewPane;